<template>
	<scroll-view scroll-y="true" :style="{height: (windowHeight - 138)*2 +'rpx',overflow:'hidden'}" @scroll='scrollFun'>
			<u-index-list :scrollTop="scrollTop" :index-list="indexList" :sticky='false'>
					<view v-for="(item, index) in listSeries" :key="index" >
						<u-index-anchor :index="item.letter">
							<text class="anchor-text">{{item.letter}}</text>
						</u-index-anchor>
						<view class="list-cell" v-for="itemN in item.list" @click="ietmFun(itemN)">
							{{itemN.name}}
						</view>
					</view>
			</u-index-list>
			<u-popup v-model="isShowRightm" mode="right" width="80%">
					<view class="list">
						<scroll-view scroll-y="true" :style="{height:(windowHeight - 250)*2 +'rpx'}">
							<template v-if="showRhtData">
							  <view class="series">
								{{showRhtData.name}}
							  </view>
							  <view class="first">
									选择车系
								</view>
								<view class="series"  @click="changeStyleFun('不限车系')">
									不限车系
								</view>
								<view class="series" v-for="(value,index) in showRhtData.list" :key="index">
									<text v-bind:class="[index == 0 ? 'no_border' : '']"   @click="changeStyleFun(value)">
										{{value['name']+value['modelName']}}
									</text>
								</view>
							</template>	
						</scroll-view>

					</view>
			</u-popup>
	</scroll-view>
</template>

<script>
	import {
		getCarModelStyleName
	} from "@/service/api/api";
	export default {
		props:{
			scHistoryList:{
				type:Array
			}
		},
		data() {
			return {
				windowHeight:'',
				scrollTop:0,
				indexList: [],
				listSeries:[{letter: "#",list: [{name:'不限品牌',list:[]}]}],
				isShowRightm:false,
				showRhtData:[],
				towRdata:''
			}
		},
		watch:{
		},
		created() {
			uni.getSystemInfo({
			    success:  (res)=> {
			        // console.log(res.windowHeight,'----当前屏幕高度');
					this.windowHeight=res.windowHeight
			    }
			});
			this.getCat()
		},
		onShow() {
			

		},
		methods: {
			//索引滚动
			scrollFun(e) {
				this.scrollTop = e.detail.scrollTop;
			},
			//每一项点中事件
			ietmFun(data){
				if(data.name=='不限品牌'){
					this.$root.closeDropdown('',1)
				}else{
					this.isShowRightm=true
					this.showRhtData=data
				}

				// console.log(data,'-----------每一项点中数据')
			},
			coleShowFun(){
				this.isShowRightm=false
				this.showRhtData=false
			},
			//选择车系
			changeStyleFun(data){
				this.isShowRightm=false
				// this.towRdata
				/*
				intentCarBrand
				意向品牌
				intentCarModel
				意向车系
				intentCarStyle
				意向车型*/

				if(data=='不限车系'){

					this.$root.closeDropdown('',1)
				}else{
					let changeIntentionCar={
						intentGroupName: data.groupName,
						intentCarBrand: data.makeName,
						intentCarModel: data.modelName,
						intentCarStyle:data.name
					}
					let scHdata=data.makeName+''+data.modelName+''+data.name
					this.scHistoryList.push(scHdata)
					this.$root.closeDropdown(changeIntentionCar,1)
				}

			},
			//车辆数据请求
			async getCat(){
				let res=await getCarModelStyleName({brandId: uni.getStorageSync('user_info').brandId || ''})
				
				if (res.data.code == 0) {
					this.listSeries =[...this.listSeries,...res.data.data]
					this.listSeries.forEach(v=>{
						this.indexList.push(v.letter)
					})		
				} else {
					uni.showToast({
						title: res.data.errMsg,
						icon: 'none'
					})
				}
				
			}
		},
	}
</script>

<style lang="scss" scoped>
	.list-cell {
		display: flex;
		box-sizing: border-box;
		width: 100%;
		padding: 10px 24rpx;
		overflow: hidden;
		color: #323233;
		font-size: 14px;
		line-height: 24px;
		background-color: #fff;
	}
	.list {
		margin-right: 30rpx;
		font-size: 20rpx;
	}
	
	.first {
		background: #F2F2F2;
		padding-left: 30rpx;
		line-height: 46rpx;
		color: #777;
	}
	
	.series {
		margin-left: 30rpx;
		line-height: 80rpx;
		color: #333;
	}
	
	.series text {
		display: block;
		border-top: 1rpx solid #E4E4E4;
	}
	
	.no_border {
		border: none !important;
	}
</style>
